<template>
  <div class="nationalday">
    <div class="nationalday-banner">
      <img :src="require('./banner.png')" alt="6月红包雨，好礼伴你行。">
    </div>
    <div class="nationalday-content">
      <div class="timer">
        <img src="./timer-text.png" alt="">
        <ul class="clear">
          <li>{{ dd }}天</li>
          <li>{{ hh }}时</li>
          <li>{{ mm }}分</li>
          <li>{{ ss }}秒</li>
        </ul>
      </div>
      <div class="section iphone">
        <img src="./section1.png" alt="">
        <div class="content">
          <p>期限180天 年化借款利率5%</p>
          <p>出借金额≥150,000元</p>
        </div>
        <a @click="_route">立即投资</a>
      </div>
      <div class="section xiaomi">
        <img src="./section2.png" alt="">
        <div class="content">
          <p>借款期限90天 年化借款利率5%</p>
          <p>出借金额≥200,000元</p>
        </div>
        <a @click="_route">立即投资</a>
      </div>
      <div class="section money">
        <img src="./section3.png" alt="">
        <div class="content">
          <p>借款期限30天 年化借款利率5%</p>
          <p>出借金额≥50,000元</p>
        </div>
        <a @click="_route">立即投资</a>
      </div>
      <div class="section gift">
        <img src="./section4.png" alt="">
        <div class="content">
          <p>活动期间出借任意标的</p>
          <p>出借金额≥50,000元</p>
          <p>可获得88元现金券一张</p>
        </div>
        <a @click="_route">立即投资</a>     
      </div>
      <div class="section info">
        <img src="./info.png" alt="">
        <div class="content">
          <p>1、活动时间：2017年09月29日10:00-2017年10月9日15:00。</p>
          <p>2、本活动“所有新老用户均可参与”，仅限年化利率为5%的“国庆狂欢”标的专享，普通标的出借将无法获得奖品。</p>
          <p>3、活动结束后，分秒金融客服人员会主动联系您确认奖品发放事宜。请在此期间保持手机通讯正常，若5个工作日无法取得联系，奖励将不予发放。</p>
          <p>4、实物奖品将在客服与您确认后的15个工作日内安排派送，图片仅供参考，奖品以实际为主。</p>
          <p>5、奖品可以折现，折现金额为奖品实际购买金额的80%（所有奖品均以官方报价为准），折现奖励金以现金的形式发放到您的分秒金融账户中；如需折现请主动联系客服。</p>
          <p>6、本活动最终解释权归分秒金融所有，如有疑问请联系在线客服或拨打400-608-2001。</p>
        </div>
      </div>
      <p class="footer-text">市场有风险 出借需谨慎 最终收益以实际为准</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      endTime: ['2017', '9', '9', '15', '0', '0'],
      dd: '-',
      hh: '-',
      mm: '-',
      ss: '-',
      restEvent: null
    }
  },
  methods: {
    _padZero (number) {
      return number < 10 ? '0' + number : number
    },
    _route () {
      const h5iosandoridConfig = {
        viewNum: 3
      }
      window.location.href = 'nativejs://' + JSON.stringify(h5iosandoridConfig)

      this.$router.push('/invest')
    },
    _startTimeDown () {
      this.restEvent = setInterval(() => {
        const time = new Date(...this.endTime) - Date.now()
        if (time > 0) {
          this.dd = this._padZero(parseInt(time / 1000 / 60 / 60 / 24, 10)) // 计算剩余的天数
          this.hh = this._padZero(parseInt(time / 1000 / 60 / 60 % 24, 10)) // 计算剩余的小时数
          this.mm = this._padZero(parseInt(time / 1000 / 60 % 60, 10)) // 计算剩余的分钟数
          this.ss = this._padZero(parseInt(time / 1000 % 60, 10)) // 计算剩余的秒数
        } else {
          this.dd = 0
          this.hh = 0
          this.mm = 0
          this.ss = 0
          clearInterval(this.restEvent)
        }
      }, 1000)
    }
  },
  mounted () {
    this._startTimeDown()
  }
}
</script>

<style lang='scss'>
  .nationalday {
    &-banner {
      width: 100%;
      height: 360px;
      img {
        width: 100%;
        height: 360px;
      }
    }
    &-content {
      background: #d9271d;
      padding: 30px;
      .timer {
        text-align: center;
        padding: 0 0 36px 0;
        font-size: 0;
        img {
          margin-top: 12px;
          width: 272px;
        }
        .clear::after,
        .clear::before {
          content: ' ';
          display: table;
          clear: both;
          overflow: hidden;
        }
        ul {
          width: 460px;
          margin: 22px auto 0 auto;
          li {
            float: left;
            width: 102px;
            height: 48px;
            margin-right: 12px;
            text-align: center;
            background: #fff;
            color: #d9271d;
            font-size: 34px;
            line-height: 48px;
          }
        }
      }
      .section {
        font-size: 0;
        margin-top: 30px;
        position: relative;
        top: 0;
        left: 0;
        p {
          font-size: 24px;
          color: #333;
        }
        img {
          width: 100%;
        }
        a {
          text-align: center;
          display: inline-block;
          width: 234px;
          height: 66px;
          color: #fff;
          background: #ff3d3e;
          line-height: 70px;
          font-size: 28px;
          border-radius: 33px;
        }
        &.iphone {
          .content {
            position: absolute;
            top: 206px;
            left: 332px;
            line-height: 33px;
          }
          a {
            position: absolute;
            top: 306px;
            left: 332px;
          }
        }

        &.xiaomi {
          .content {
            position: absolute;
            top: 122px;
            left: 332px;
            line-height: 33px;
          }
          a {
            position: absolute;
            top: 236px;
            left: 332px;
          }
        }

        &.money {
          .content {
            position: absolute;
            top: 122px;
            left: 332px;
            line-height: 33px;
          }
          a {
            position: absolute;
            top: 236px;
            left: 332px;
          }
        }

        &.gift {
          .content {
            position: absolute;
            top: 122px;
            left: 332px;
            line-height: 33px;
          }
          a {
            position: absolute;
            top: 256px;
            left: 332px;
          }
        }

        &.info {
          .content {
            position: absolute;
            top: 70px;
            left: 0;
            padding: 40px;
            line-height: 33px;
            p {
              font-size: 24px;
              color: #333;
              line-height: 44px;
            }
          }
        }
      }

      .footer-text {
        text-align: center;
        color: #fff;
        font-size: 24px;
        padding: 40px 0 16px 0;
      }
    }
  }
</style>
